<template>
  <div class="common-layout">
    <el-image
        :src="imageSrc"
        style="height: 100%; width: 100%"
        fit="cover"
    />
    <el-container class="contain">
      <el-header class="flex justify-center" style="width: 100%">
            <p class="gradient text-stroke-0.1rem" style="font-size: 3.6vw; padding-top: 3%;">
                基于区块链技术构建茶叶溯源平台
            </p>
      </el-header>
      <el-main>
        <el-row class="carousel-wrapper">
          <el-col :span="12">
            <el-carousel
                :pause-on-hover="false"
                indicator-position="none"
                v-model="active"
                arrow="never"
            >
              <el-carousel-item v-for="(item, index) in imgInfo" :key="index" class="flex justify-center">
                <el-image :src="item.imgUrl" style="width: 57%; height: 100%"/>
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col :span="5">
            <el-carousel
                :pause-on-hover="false"
                indicator-position="none"
                v-model="active"
                direction="vertical"
            >
              <el-carousel-item >
                <h2 class="h2" >基础信息管理</h2>
                <p class="h3" >基础信息管理包含：企业注册信息维护，用户登录
                  信息维护，企业产地维护，企业产品维护。</p>
              </el-carousel-item>
              <el-carousel-item >
                <h2 class="h2" >种植过程管理</h2>
                <p class="h3" >种植过程管理包含：对种植的投入品使用的填报，
                  对种植过程的农事操作进行上报。实现种过程全
                  程可追溯。保溯源数据可用、可信和可视。</p>
              </el-carousel-item>
              <el-carousel-item >
                <h2 class="h2">加工过程管理</h2>
                <p class="h3" >加工过程管理中对茶叶加工的各个过程进行详细的
                  记录，保证加工过程追溯到人。为皖西徽茶品牌保
                  护提供数据支持。</p>
              </el-carousel-item>
              <el-carousel-item >
                <h2 class="h2">流通过程管理</h2>
                <p class="h3" >流通过程管理包括：物流信息管理、客户信息管
                  理。方便企业存诸记际客户信息与物流信息。</p>
              </el-carousel-item>
              <el-carousel-item >
                <h2 class="h2">防伪溯源信息</h2>
                <p class="h3" >防伪溯源信息管理：包括生成追溯码，向消费者展
                  示产品信息。同时可查询产品追潮信息，销售去向
                  分析。</p>
              </el-carousel-item>
              <el-carousel-item >
                <h2 class="h2">存证系统</h2>
                <p class="h3" >存证系统管理包含：数据管理，系统集成管理
                  信息维护，系统监督管理。</p>
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col :span="7" class="flex justify-center self-start">
            <el-link class="text-stroke-sm" style="font-size: 1.6vw;color: #094af1; padding-left: 26%;" @click="logOut" :underline="false">
              <el-icon>
                <SwitchButton/>
              </el-icon>
              退出系统
            </el-link>
          </el-col>
        </el-row>
        <el-row class="flex justify-center" :gutter="35">
          <el-col class="banner_ctr" :span="2">
            <el-link @click="router.push('/enterpriseinfo')" :underline="false">
              <div class="image-item"
                   @mouseover="highlightImage(0)"
                   @mouseout="resetImageHighlight(0)">
                <el-image
                    src="http://ahtea.wtycms.cn/static/static/picture/intelligence_icon.png"
                ></el-image>
                <p style="color: #1cf6ff;">基础信息管理</p>
              </div>
            </el-link>
          </el-col>
          <el-image src="http://ahtea.wtycms.cn/static/static/picture/nav_spacer.png" style="padding: 1%;"/>
          <el-col class="banner_ctr" :span="2">
            <el-link @click="router.push('/trpcgInfo')" :underline="false">
              <div class="image-item"
                   @mouseover="highlightImage(1)"
                   @mouseout="resetImageHighlight(1)">
                <el-image
                    src="http://ahtea.wtycms.cn/static/static/picture/nysc_icon.png"
                ></el-image>
                <p style="color: #1cf6ff;">种植过程管理</p>
              </div>
            </el-link>
          </el-col>
          <el-image src="http://ahtea.wtycms.cn/static/static/picture/nav_spacer.png" style="padding: 1%;"/>
          <el-col class="banner_ctr" :span="2">
            <el-link @click="router.push('/jggc')" :underline="false">
              <div class="image-item"
                   @mouseover="highlightImage(2)"
                   @mouseout="resetImageHighlight(2)">
                <el-image
                    src="http://ahtea.wtycms.cn/static/static/picture/relaxation_icon.png"
                ></el-image>
                <p style="color: #1cf6ff;">加工过程管理</p>
              </div>
            </el-link>
          </el-col>
          <el-image src="http://ahtea.wtycms.cn/static/static/picture/nav_spacer.png" style="padding: 1%;"/>
          <el-col class="banner_ctr" :span="2">
            <el-link @click="router.push('/khxx')" :underline="false">
              <div class="image-item"
                   @mouseover="highlightImage(3)"
                   @mouseout="resetImageHighlight(3)">
                <el-image
                    src="http://ahtea.wtycms.cn/static/static/picture/business_icon.png"
                ></el-image>
                <p style="color: #1cf6ff;">流通过程管理</p>
              </div>
            </el-link>
          </el-col>
          <el-image src="http://ahtea.wtycms.cn/static/static/picture/nav_spacer.png" style="padding: 1%;"/>
          <el-col class="banner_ctr" :span="2">
            <el-link @click="router.push('/symInfo')" :underline="false">
              <div class="image-item"
                   @mouseover="highlightImage(4)"
                   @mouseout="resetImageHighlight(4)">
                <el-image
                    src="http://ahtea.wtycms.cn/static/static/picture/quality_traceability_icon.png"
                ></el-image>
                <p style="color: #1cf6ff;">防伪溯源信息</p>
              </div>
            </el-link>
          </el-col>
          <el-image src="http://ahtea.wtycms.cn/static/static/picture/nav_spacer.png" style="padding: 1%;"/>
          <el-col class="banner_ctr" :span="2">
            <el-link @click="router.push('/czshow')" :underline="false">
              <div class="image-item"
                   @mouseover="highlightImage(5)"
                   @mouseout="resetImageHighlight(5)">
                <el-image
                    src="http://ahtea.wtycms.cn/static/static/picture/agricultural_data_icon.png"
                ></el-image>
                <p style="color: #1cf6ff;">存证系统</p>
              </div>
            </el-link>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>

</template>

<script setup>
import router from "@/router/index.js";
import {ref} from "vue";
import {imgInfo} from "@/api/options/index.js";
import {useUserStore} from "@/stores/myStore.js";
import {ElMessage} from "element-plus";
import {get} from "@/utils/axiosMethod.js";
import indexImg from "@/../public/imgt.jpg"
const imageSrc = indexImg
const userStore = useUserStore()
const activeIndex = ref(0)
const active = ref(0)
const highlightImage= (index)=> {
  // document.querySelector(`.image-item:nth-child(${index + 1})`).classList.add('highlight')
}
const resetImageHighlight = (index)=> {
  // document.querySelector(`.image-item:nth-child(${index + 1})`).classList.remove('highlight')
}
const logOut = ()=> {
  get("/api/auth/logout", (message)=> {
    userStore.auth.user = null
    ElMessage({
      message,
      type: 'success',
      duration: 1000
    })
    router.push('/')
  })
}

</script>

<style scoped>
.image-item {
  cursor: pointer;
}

.image-item:hover,
.highlight {
  /*outline: 2px solid #1cf6ff;*/
  box-shadow:
  0 0 80px 10px #1cf6ff,
  0 0 80px 10px #1cf6ff,
  0 0 80px 10px #1cf6ff,
  0 0 80px 10px #1cf6ff;
  background-color: #0ee8f1;
}
.banner_ctr {
  position: relative;
  cursor: pointer;
  width: 5rem;
  height: 6rem;
  background-color: rgba(123, 210, 246, 0.2);
  border: 3px solid #2bebff;
  background-size: contain;
  border-radius: 15%;
  font-size: 0.925rem;
  text-align: center;
  vertical-align: top;
}
.common-layout {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
}
.contain {
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  width: 100vw;
  height: 100vh;
}
.carousel-wrapper {
  padding-top: 6%;
  position: relative;
  z-index: 1;
  height: 70%;
}
.gradient {
  color: #7d03ef; /* 设置文本颜色为渐变色的起始颜色 */
  background-clip: text;
  -webkit-background-clip: text;
}
.h2 {
  font-size: 1.65rem;
  line-height: 1.75rem;
  color: #ffffff;
  padding-top: 8%;
  font-weight: bold;
}
.h3 {
  font-size: 1.15rem;
  line-height: 1.85rem;
  color: #92fde9;
  padding-top: 8%;
}
</style>